<template>
  <div class="home">
    <div id="starsBox"></div>
    <div class="Header">
      <div class="HeaderTop">
        <div class="HeaderTopLeft">
          <img src="../assets/Img/1.png" alt>
        </div>
        <Sousuo></Sousuo>
        <div class="HeaderTopRight">登录 | 注册</div>
      </div>
      <div class="HeaderIndex HeaderTop">
        <div class="HeaderIndexLeft">
          <div>基层数据管理</div>
          <div>地方志</div>
          <div>地方志，简称“方志”，即按一定体例，全面记载某一时期某一地域的自然、社会、政治、经济、文化等方面情况或特定事项的书籍文献。地方志资源来源于中国地方志数据库，新方志收录始于1949年，共计40000余册，旧方志收录年代为新中国成立之前，预计近80000册。</div>
        </div>
        <div class="HeaderIndexCenter"></div>
        <div class="HeaderIndexRight">
          <div class="HeaderIndexRightFlex">
            <div class="HeaderIndexRightFlexTop">
              <div class="HeaderIndexRightFlexTopLeft"></div>
              <div>最新动态</div>
            </div>
            <div class="HeaderIndexRightFlexBottom">
              <div>· 数据库新增家谱1228册</div>
              <div>
                · 广东省茂名市金塘镇陈先生捐赠《文林陈
                氏族谱》（第1卷）
              </div>
              <div>
                · 夏明智老师对数据库中“夏”氏家谱提出
                梳理和修改建议
              </div>
              <div>
                · 莅临我院给予指导并赠送家谱师氏家谱
                10册
              </div>
            </div>
            <div class="HeaderIndexRightFlexFoot">
              <div>
                <div>浏览量</div>
                <div id="count"></div>
              </div>
              <div>
                <div>下载量</div>
                <div id="count11"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="IndexJianShe">
      <div class="IndexHeaght">建设状况</div>
      <div>
        <div class="BorderBulr">
          <div class="FontName">地方志分布</div>
          <div id="myChart" :style="{width: '250px', height: '196px'}"></div>
        </div>
        <div class="BorderBulr">
          <div class="FontName">地方志分布</div>
          <div id="myChartOne" :style="{width: '370px', height: '212px'}"></div>
        </div>
        <div class="BorderBulr">
          <div class="FontName">地方志分布</div>
          <div id="myChartLeiDa" :style="{width: '370px', height: '80%'}"></div>
        </div>
      </div>
    </div>
    <div class="IndexFenBu IndexJianShe">
      <div class="IndexHeaght IndexFenBuIndexHeaght">分布状况</div>
      <div class="PosizindexOne">
        <div class="PosizindexOneLeft">
          <div>
            <div>全部</div>
            <div>明朝以前</div>
            <div>明朝</div>
            <div>清朝</div>
            <div>中华民国</div>
            <div>现代</div>
          </div>
        </div>
        <div class="Can">
          <div id="mapContainer" :style="{width: '600px', height: '600px'}"></div>
          <div class="Posizindex"></div>
          <div class="PosizindexMin"></div>
          <div class="benzi">
            <div>
              <div>湖北省地方志</div>
              <div>地方志： 6870卷</div>
              <div>涉农志： 9420卷</div>
              <div>
                <div>
                  <img src="../assets/Img/6.png" alt>
                  <div>
                    <div>全国占比</div>
                    <div>12%</div>
                  </div>
                </div>
                <div>
                  <img src="../assets/Img/6.png" alt>
                  <div>
                    <div>全国占比</div>
                    <div>12%</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="IndexJianShe">
      <div class="IndexHeaght">概况</div>
      <div class="IndexWan">
        <div>
          <img src="../assets/Img/7.png" alt>
        </div>
        <div>&nbsp; &nbsp;&nbsp;&nbsp;中国地方志数据库（China Local Gazetteers Database，CLGD），地方志，简称“方志”，即按一定体例，全面记载某一时期某一地域的自然、社会、政治、经济、文化等方面情况或特定事项的书籍文献。通常按年代分为新方志、旧方志，新方志收录始于1949年，共计40000余册，旧方志收录年代为新中国成立之前，近80000卷。
          <br>&nbsp; &nbsp;&nbsp;&nbsp;地方志，简称“方志”，即按一定体例，全面记载某一时期某一地域的自然、社会、政治、经济、文化等方面情况或特定事项的书籍文献。通常按年代分为新方志、旧方志，新方志收录始于1949年，共计40000余册，旧方志收录年代为新中国成立之前，近80000卷。
        </div>
      </div>
    </div>
    <Foot></Foot>
    <div class="xiangqi">页面跳转\
      <router-link to="/DiFangZhi">地方志</router-link>
      <div></div>
      <router-link to="/DiFangZhiNeiRong">地方志详情</router-link>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Foot from "../components/Foot";
import Sousuo from "../components/Sousuo";
import "../../node_modules/echarts/map/js/china.js"; // 引入中国地图数据
let echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/map");
require("echarts/map/js/china.js");
require("echarts/lib/chart/pie");
require("echarts/lib/chart/radar");
require("echarts/lib/chart/bar");
// 引入提示框和图例组件
require("echarts/lib/component/title");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/legend");
require("echarts/lib/component/legendScroll");
import $ from "jquery";
import { Stare } from "../assets/util.js";
import { genData } from "../assets/util.js";


export default {
  name: "home",

  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  components: {
    Sousuo: Sousuo,
    Foot: Foot
  },
  mounted() {
    $(function() {
      $("#count").numberRock({
        lastNumber: 6666,
        duration: 5000,
        easing: "swing" //慢快慢
      });
    });
    $(function() {
      $("#count11").numberRock({
        lastNumber: 864,
        duration: 5000,
        easing: "swing" //慢快慢
      });
    });
    //
    Stare();

    this.drawLine();
    this.drawLineOne();
    this.drawLineLeiDa();
    this.Map();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart"));

      // 绘制图表
      myChart.setOption({
        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {}
        },

        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            data: [
              { value: 30, name: "30%" },
              { value: 40, name: "40%" },
              { value: 60, name: "60%" }
            ],
            roseType: "angle",
            label: {
              normal: {
                textStyle: {
                  color: "rgba(10, 10, 10, 1)"
                }
              }
            },
            itemStyle: {
              normal: {
                color: "#c23531",
                shadowBlur: 200,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    },
    drawLineOne() {
      // 基于准备好的dom，初始化echarts实例
      let to = echarts.init(document.getElementById("myChartOne"));

      // 绘制图表
      to.setOption({
        tooltip: {
          text: "this is tool tip"
        },

        xAxis: {
          data: ["1月", "2月", "5月", "8月", "9月", "10月"]
        },
        yAxis: {},
        series: [
          {
            type: "bar",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#83bff6" },
                  { offset: 0.5, color: "#188df0" },
                  { offset: 1, color: "#188df0" }
                ])
              },
              emphasis: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#2378f7" },
                  { offset: 0.7, color: "#2378f7" },
                  { offset: 1, color: "#83bff6" }
                ])
              }
            },
            data: [200, 400, 1000, 800, 600, 1200]
          }
        ]
      });
    },
    drawLineLeiDa() {
      // 基于准备好的dom，初始化echarts实例
      let LeiDa = echarts.init(document.getElementById("myChartLeiDa"));

      // 绘制图表
      LeiDa.setOption({
        // title: {
        //   text: "基础雷达图"
        // },
        tooltip: {},
        // legend: {
        //   data: ["预算分配（Allocated Budget）", "实际开销（Actual Spending）"]
        // },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: "#000",

              padding: [-1, -1]
            }
          },
          indicator: [
            { name: "明朝", max: 16000 },
            { name: "民国", max: 30000 },
            { name: "清朝", max: 38000 },
            { name: "现代", max: 38000 }
          ]
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            // areaStyle: {normal: {}},
            data: [
              {
                value: [4300, 10000, 28000, 35000, 50000, 19000],
                name: "Allocated Budge"
              },
              {
                value: [5000, 14000, 28000, 31000, 42000, 21000],
                name: "Actual Spending"
              }
            ]
          }
        ]
      });
    },
    Map: function() {
      var myChart = echarts.init(document.getElementById("mapContainer"));
      var name_title = "中国人民大学2017年各省市计划录取人数";
      var subname = "数据爬取自千栀网\n，\n上海、浙江无文理科录取人数";
      var nameColor = " rgb(55, 75, 113)";
      var name_fontFamily = "等线";
      var subname_fontSize = 15;
      var name_fontSize = 18;
      var mapName = "china";
      var data = [
        { name: "北京", value: 177 },
        { name: "天津", value: 42 },
        { name: "河北", value: 102 },
        { name: "山西", value: 81 },
        { name: "内蒙古", value: 47 },
        { name: "辽宁", value: 67 },
        { name: "吉林", value: 82 },
        { name: "黑龙江", value: 66 },
        { name: "上海", value: 24 },
        { name: "江苏", value: 92 },
        { name: "浙江", value: 114 },
        { name: "安徽", value: 109 },
        { name: "福建", value: 116 },
        { name: "江西", value: 91 },
        { name: "山东", value: 119 },
        { name: "河南", value: 137 },
        { name: "湖北", value: 116 },
        { name: "湖南", value: 114 },
        { name: "重庆", value: 91 },
        { name: "四川", value: 125 },
        { name: "贵州", value: 62 },
        { name: "云南", value: 83 },
        { name: "西藏", value: 9 },
        { name: "陕西", value: 80 },
        { name: "甘肃", value: 56 },
        { name: "青海", value: 10 },
        { name: "宁夏", value: 18 },
        { name: "新疆", value: 67 },
        { name: "广东", value: 123 },
        { name: "广西", value: 59 },
        { name: "海南", value: 14 }
      ];

      var geoCoordMap = {};
      var toolTipData = [
        {
          name: "北京",
          value: [{ name: "文科", value: 95 }, { name: "理科", value: 82 }]
        },
        {
          name: "天津",
          value: [{ name: "文科", value: 22 }, { name: "理科", value: 20 }]
        },
        {
          name: "河北",
          value: [{ name: "文科", value: 60 }, { name: "理科", value: 42 }]
        },
        {
          name: "山西",
          value: [{ name: "文科", value: 40 }, { name: "理科", value: 41 }]
        },
        {
          name: "内蒙古",
          value: [{ name: "文科", value: 23 }, { name: "理科", value: 24 }]
        },
        {
          name: "辽宁",
          value: [{ name: "文科", value: 39 }, { name: "理科", value: 28 }]
        },
        {
          name: "吉林",
          value: [{ name: "文科", value: 41 }, { name: "理科", value: 41 }]
        },
        {
          name: "黑龙江",
          value: [{ name: "文科", value: 35 }, { name: "理科", value: 31 }]
        },
        {
          name: "上海",
          value: [{ name: "文科", value: 12 }, { name: "理科", value: 12 }]
        },
        {
          name: "江苏",
          value: [{ name: "文科", value: 47 }, { name: "理科", value: 45 }]
        },
        {
          name: "浙江",
          value: [{ name: "文科", value: 57 }, { name: "理科", value: 57 }]
        },
        {
          name: "安徽",
          value: [{ name: "文科", value: 57 }, { name: "理科", value: 52 }]
        },
        {
          name: "福建",
          value: [{ name: "文科", value: 59 }, { name: "理科", value: 57 }]
        },
        {
          name: "江西",
          value: [{ name: "文科", value: 49 }, { name: "理科", value: 42 }]
        },
        {
          name: "山东",
          value: [{ name: "文科", value: 67 }, { name: "理科", value: 52 }]
        },
        {
          name: "河南",
          value: [{ name: "文科", value: 69 }, { name: "理科", value: 68 }]
        },
        {
          name: "湖北",
          value: [{ name: "文科", value: 60 }, { name: "理科", value: 56 }]
        },
        {
          name: "湖南",
          value: [{ name: "文科", value: 62 }, { name: "理科", value: 52 }]
        },
        {
          name: "重庆",
          value: [{ name: "文科", value: 47 }, { name: "理科", value: 44 }]
        },
        {
          name: "四川",
          value: [{ name: "文科", value: 65 }, { name: "理科", value: 60 }]
        },
        {
          name: "贵州",
          value: [{ name: "文科", value: 32 }, { name: "理科", value: 30 }]
        },
        {
          name: "云南",
          value: [{ name: "文科", value: 42 }, { name: "理科", value: 41 }]
        },
        {
          name: "西藏",
          value: [{ name: "文科", value: 5 }, { name: "理科", value: 4 }]
        },
        {
          name: "陕西",
          value: [{ name: "文科", value: 38 }, { name: "理科", value: 42 }]
        },
        {
          name: "甘肃",
          value: [{ name: "文科", value: 28 }, { name: "理科", value: 28 }]
        },
        {
          name: "青海",
          value: [{ name: "文科", value: 5 }, { name: "理科", value: 5 }]
        },
        {
          name: "宁夏",
          value: [{ name: "文科", value: 10 }, { name: "理科", value: 8 }]
        },
        {
          name: "新疆",
          value: [{ name: "文科", value: 36 }, { name: "理科", value: 31 }]
        },
        {
          name: "广东",
          value: [{ name: "文科", value: 63 }, { name: "理科", value: 60 }]
        },
        {
          name: "广西",
          value: [{ name: "文科", value: 29 }, { name: "理科", value: 30 }]
        },
        {
          name: "海南",
          value: [{ name: "文科", value: 8 }, { name: "理科", value: 6 }]
        }
      ];

      /*获取地图数据*/
      myChart.showLoading();
      var mapFeatures = echarts.getMap(mapName).geoJson.features;
      myChart.hideLoading();
      mapFeatures.forEach(function(v) {
        // 地区名称
        var name = v.properties.name;
        // 地区经纬度
        //console.log(v.properties.cp);
        geoCoordMap[name] = v.properties.cp;
      });

      // //console.log("============geoCoordMap===================")
      // //console.log(geoCoordMap)
      // //console.log("================data======================")
      //console.log(data);
      //console.log(toolTipData);
      var max = 480,
        min = 9; // todo
      var maxSize4Pin = 100,
        minSize4Pin = 20;

      var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            //console.log(geoCoord.concat(data[i].value));
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        return res;
      };
      let option = {
        title: {
          x: "center",
          textStyle: {
            color: nameColor,
            fontFamily: name_fontFamily,
            fontSize: name_fontSize
          },
          subtextStyle: {
            fontSize: subname_fontSize,
            fontFamily: name_fontFamily
          }
        },
        tooltip: {
          trigger: "item",
          formatter: function(params) {
            if (typeof params.value[2] == "undefined") {
              var toolTiphtml = "";
              for (var i = 0; i < toolTipData.length; i++) {
                if (params.name == toolTipData[i].name) {
                  toolTiphtml += toolTipData[i].name + ":<br>";
                  for (var j = 0; j < toolTipData[i].value.length; j++) {
                    toolTiphtml +=
                      toolTipData[i].value[j].name +
                      ":" +
                      toolTipData[i].value[j].value +
                      "<br>";
                  }
                }
              }
              //console.log(toolTiphtml);
              // //console.log(convertData(data))
              return toolTiphtml;
            } else {
              var toolTiphtml = "";
              for (var i = 0; i < toolTipData.length; i++) {
                if (params.name == toolTipData[i].name) {
                  toolTiphtml += toolTipData[i].name + ":<br>";
                  for (var j = 0; j < toolTipData[i].value.length; j++) {
                    toolTiphtml +=
                      toolTipData[i].value[j].name +
                      ":" +
                      toolTipData[i].value[j].value +
                      "<br>";
                  }
                }
              }
              //console.log(toolTiphtml);
              // //console.log(convertData(data))
              return toolTiphtml;
            }
          }
        },
        // legend: {
        //     orient: 'vertical',
        //     y: 'bottom',
        //     x: 'right',
        //     data: ['credit_pm2.5'],
        //     textStyle: {
        //         color: '#fff'
        //     }
        // },
        visualMap: {
          inRange: {
            // color: ['#3B5077', '#031525'] // 蓝黑
            // color: ['#ffc0cb', '#800080'] // 红紫
            // color: ['#3C3B3F', '#605C3C'] // 黑绿
            // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
            // color: ['#23074d', '#cc5333'] // 紫红
            // color: ["#00467F", "#A5CC82"] // 蓝绿
            color: ["#1488CC", "#2B32B2"] // 浅蓝
            // color: ['#00467F', '#A5CC82'] // 蓝绿
            // color: ['#00467F', '#A5CC82'] // 蓝绿
            // color: ['#00467F', '#A5CC82'] // 蓝绿
            // color: ['#00467F', '#A5CC82'] // 蓝绿
          }
        },
        /*工具按钮组*/
        // toolbox: {
        //     show: true,
        //     orient: 'vertical',
        //     left: 'right',
        //     top: 'center',
        //     feature: {
        //         dataView: {
        //             readOnly: false
        //         },
        //         restore: {},
        //         saveAsImage: {}
        //     }
        // },
        geo: {
          show: true,
          map: mapName,
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: "#031525",
              borderColor: "#3B5077"
            },
            emphasis: {
              areaColor: "#2B91B7"
            }
          }
        },
        series: [
          {
            name: "散点",
            type: "scatter",
            coordinateSystem: "geo",
            data: convertData(data),
            symbolSize: function(val) {
              return val[2] / 10;
            },
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "#05C3F9"
              }
            }
          },
          {
            type: "map",
            map: mapName,
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff"
                }
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: "#031525",
                borderColor: "#3B5077"
              },
              emphasis: {
                areaColor: "#2B91B7"
              }
            },
            animation: false,
            data: data
          },
          {
            name: "点",
            type: "scatter",
            coordinateSystem: "geo",
            symbol: "pin", //气泡
            symbolSize: function(val) {
              var a = (maxSize4Pin - minSize4Pin) / (max - min);
              var b = minSize4Pin - a * min;
              b = maxSize4Pin - a * max;
              return a * val[2] + b;
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#fff",
                  fontSize: 9
                }
              }
            },
            itemStyle: {
              normal: {
                color: "#F62157" //标志颜色
              }
            },
            zlevel: 6
            // data: convertData(data)
          },
          // 前五亮
          {
            name: "Top 5",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: convertData(
              data
                .sort(function(a, b) {
                  return b.value - a.value;
                })
                .slice(0, 5)
            ),
            symbolSize: function(val) {
              return val[2] / 10;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "yellow",
                shadowBlur: 10,
                shadowColor: "yellow"
              }
            },
            zlevel: 1
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>
<style scoped>
.Header {
  color: rgba(255, 255, 255, 1);
  height: 576px;
  background: url("../assets/Img/0.jpg");
  background-size: 100% 100%;
  background-position: center 0;
  background-size: cover;
}
.HeaderTop {
  display: flex;
  padding-top: 55px;
  justify-content: center;
  align-items: center;
}
.HeaderTopLeft {
  width: 236px;
  margin-right: 79px;
  height: 47px;
}
.HeaderTopLeft > img {
  width: 100%;
  height: 100%;
}

.HeaderTopRight {
  width: 102px;
  height: 19px;
  font-size: 16px;
  font-family: MicrosoftYaHei;
  font-weight: 400;

  line-height: 20px;
}
.HeaderIndex {
  padding-top: 46px;
}
.HeaderIndexLeft {
  margin-right: 26px;
}
.HeaderIndexLeft > div:nth-child(1) {
  width: 300px;
  font-size: 50px;
  line-height: 79px;
}
.HeaderIndexLeft > div:nth-child(2) {
  height: 67px;
  width: 182px;
  background: url("../assets/Img/3.png");
  position: relative;
  right: 25px;
  color: rgba(29, 54, 94, 1);
  padding-top: 7px;
}
.HeaderIndexLeft > div:nth-child(3) {
  width: 369px;
  height: 114px;
  font-size: 14px;
  text-align: left;
}
.HeaderIndexCenter {
  height: 406px;
  width: 377px;
  background: url("../assets/Img/2.png");
}
.HeaderIndexRight {
  width: 250px;
  height: 424px;
  position: relative;
}
.HeaderIndexRightFlex {
  position: absolute;
  width: 322px;
  height: 424px;
  background: rgba(250, 250, 250, 0.9);
  left: -25px;
  bottom: -10px;
  box-sizing: border-box;
  padding: 26px 37px 0 25px;
}
.HeaderIndexRightFlexTop {
  display: flex;
  align-items: center;
}
.HeaderIndexRightFlexTopLeft {
  width: 5px;
  height: 22px;
  background: #1062af;
  margin-right: 13px;
}
.HeaderIndexRightFlexTop:nth-child(1) {
  height: 25px;
  font-size: 24px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  line-height: 30px;
  margin-bottom: 21px;
}
.HeaderIndexRightFlexBottom > div {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(21, 110, 178, 1);
  text-align: left;
}
.HeaderIndexRightFlexFoot {
  margin-top: 28px;
  display: flex;
}
.HeaderIndexRightFlexFoot > div {
  width: 110px;
  height: 110px;
  background: #82aec2;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.HeaderIndexRightFlexFoot > div > div:nth-child(1) {
  font-size: 18px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  margin-bottom: 13px;
}
.HeaderIndexRightFlexFoot > div:nth-child(1) {
  margin-right: 21px;
}
.IndexJianShe {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 64px;
}
.IndexHeaght {
  height: 19px;
  width: 947px;
  background: url("../assets/Img/5.png");
  margin: 55px 0 49px 0;
  line-height: 19px;
  font-size: 30px;
}
.BorderBulr {
  width: 376px;
  height: 264px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(119, 139, 170, 1);
  border-radius: 10px 10px 10px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 13px;
}
.FontName {
  width: 75px;
  height: 16px;
  font-size: 15px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(52, 52, 52, 1);
}
.IndexJianShe > div:nth-child(2) {
  display: flex;
}
#myChartLeiDa {
  bottom: -15px;
}
.IndexFenBu {
  background: #eeeff1;
  height: 525px;
  overflow: hidden;
}
.IndexFenBu {
  position: relative;
}
.PosizindexOne {
  display: flex;
  position: relative;
}
.Can {
  position: relative;
  width: 600px;
  height: 600px;
  position: relative;
  top: -152px;
}
.PosizindexMin {
  position: absolute;
  height: 600px;
  width: 600px;

  left: 0px;
  bottom: 0;
}
.Posizindex {
  position: absolute;
  height: 146px;
  width: 200px;
  background: #eeeff1;
  left: 0px;
  bottom: 0;
}
.PosizindexOneLeft {
  width: 174px;
  height: 331px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(189, 189, 189, 1);
}

.PosizindexOneLeft > div > div {
  font-size: 15px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(52, 52, 52, 1);
  text-align: center;
  width: 135px;
  height: 38px;
  line-height: 38px;
  margin-left: 20px;
  margin-top: 10px;
}
.PosizindexOneLeft > div > div:nth-child(2) {
  width: 135px;
  height: 38px;
  border: 1px solid rgba(78, 120, 176, 1);
}
.benzi {
  width: 288px;
  height: 253px;
  border: 1px solid rgba(189, 189, 189, 1);
  background: rgba(250, 250, 250, 0.8);
  position: absolute;
  z-index: 99999999;
  top: 0;
  right: 0;
  top: 179px;
  right: -145px;
}
.benzi > div {
  padding: 31px 0 0 31px;
  text-align: center;
}
.benzi > div > div {
  display: flex;
}
.benzi > div > div:nth-child(1) {
  font-size: 24px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(52, 52, 52, 1);
  margin-bottom: 18px;
}
.benzi > div > div:nth-child(2),
.benzi > div > div:nth-child(3) {
  font-size: 15px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(52, 52, 52, 1);
}
.benzi > div > div:nth-child(3) {
  margin-bottom: 38px;
}
.benzi > div > div:nth-child(4) > div {
  display: flex;
}
.benzi > div > div:nth-child(4) > div > div > div:nth-child(1) {
  font-size: 15px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(52, 52, 52, 1);
}
.benzi > div > div:nth-child(4) > div > div > div:nth-child(2) {
  font-size: 36px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(52, 52, 52, 1);
}
.benzi > div > div:nth-child(4) > div:nth-child(1) {
  margin-right: 51px;
}
.IndexWan > div:nth-child(2) {
  width: 780px;
  height: 196px;
  font-size: 15px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(52, 52, 52, 1);
  line-height: 36px;
  margin-left: 90px;
  text-align: left;
}
/* //  */

/* // 
 */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background: #22313f;
}

#starsBox {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 576px;
  z-index: 99999;
}
.xiangqi{
  position: fixed;
  top: 0;
}
</style>
